import { defineConfig } from 'vite'
/*
# @vitejs/plugin-react

```
"devDependencies": {
	"@vitejs/plugin-react": "^3.0.1",
}
```


vite-plugin-react，它让React开发与Vite的结合变得更加丝滑。

vite-plugin-react 是一个由Vite社区开发的插件，旨在简化React应用在Vite环境下的构建过程。
它无缝地整合了React的JSX语法支持，并且提供了对ES模块和TypeScript的支持，
使得开发者可以在Vite环境中享受到React开发的所有便利性。

# 技术分析
- JSX 支持：该插件自动处理React JSX语法，无需额外配置Babel或者其他转换工具。
- ES 模块：插件默认支持原生ES模块导入，这意味着你可以直接使用import语句引入React组件，而无需担心兼容问题。
- TypeScript 支持：对于TypeScript开发，vite-plugin-react提供了一流的集成，允许你直接在React项目中使用TypeScript编写代码。
- HMR（Hot Module Replacement）优化：利用Vite的HMR特性，当源代码发生变化时，只更新必要的部分，提高开发效率。

# 应用场景
- 新项目初始化：如果你打算开始一个新的React项目，vite-plugin-react可以帮你快速搭建起一个现代、高效的开发环境。
- 现有项目迁移：对于已经在使用React但想尝试Vite的项目，此插件是迁移过程中的理想选择，能够平滑过渡到新的构建体系。
- 教学与学习：对于初学者，这个插件降低了React + Vite入门的门槛，因为不需要复杂的配置即可开始编码。

*/
import react from '@vitejs/plugin-react'
/*
# 推荐使用：vite-plugin-svgr - SVG转React组件的利器！

```
"devDependencies": {
	"vite-plugin-svgr": "^2.4.0"
}
```


在前端开发中，SVG图标因其轻量级和可缩放性而被广泛使用。
当结合React框架时，将SVG转换为React组件可以极大提升代码组织和重用的便利性。
今天，我们向您推荐一个出色的开源项目——vite-plugin-svgr，这是一个基于Vite的插件，能自动将SVG文件转化为React组件。


# 项目介绍
vite-plugin-svgr利用了强大的svgr库，只需一步安装，即可在您的Vite项目中实现SVG到React组件的平滑过渡。
安装简单，使用方便，让SVG管理变得轻松愉快。

# 项目技术分析
该插件的核心在于其集成的svgr库，它提供了以下主要功能：
- SVG转换：通过内建的转换规则，将SVG文件转换成符合React语法的JSX代码。
- TypeScript支持：配合TypeScript声明文件，为SVG组件提供更好的类型推断，增强编码体验。
- 自定义配置：允许您自定义svgr和esbuild的选项以满足特定需求，例如启用SVGO优化SVG。

# 项目及技术应用场景
- 快速导入SVG：无需手动编写组件，直接导入SVG文件并作为React组件使用，如import Logo from './logo.svg?react';
- 统一SVG处理：在大型项目中，统一管理和优化所有SVG资源，减少重复工作。
- TypeScript友好：对于TS项目，自动类型推断帮助开发者避免错误，提高代码质量。

# 项目特点
- 无缝整合Vite：与Vite构建系统完美融合，无需额外配置，开箱即用。
- 灵活配置：支持svgr和esbuild的各种选项，可以根据项目需求进行定制。
- 性能优化：可以通过开启SVGO进一步优化SVG代码，减小包体积。
- 易扩展：如果需要更多的转换规则，可以通过插件系统添加自定义功能。



*/
import svgr from 'vite-plugin-svgr'
/*
@vitejs/plugin-legacy

```
"devDependencies": {
	"@vitejs/plugin-legacy": "^3.0.1",
}
```


为打包后的文件提供传统浏览器兼容性支持。
*/
import legacy from '@vitejs/plugin-legacy'
import path from 'path'
import { createVitePlugin } from './config/plugins'

// https://vitejs.dev/config/
// const targetHost = 'http://172.16.185.148'
// const targetHost = 'http://10.67.30.120/'
const targetHost = 'http://10.67.16.156/'

/*
https://cn.vitejs.dev/config/shared-options.html#root
*/
export default defineConfig({
	/*
	root 项目根目录（index.html 文件所在的位置）。
	*/
	root: 'src/pages/',
	/*
	base 开发或生产环境服务的公共基础路径。
	*/
	base: './',
	/*
	resolve.alias 文件系统路径的别名

	类型：Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>
	
	也可以是一个对象，或一个 { find, replacement, customResolver } 的数组。
	*/
	resolve: {
		alias: [
			{
				find: '@',
				/*
				path.resolve()默认输出的是当前项目的根目录（工作路径）
				path.resolve()将入参从后往前拼接为一个绝对路径
				*/
				replacement: path.resolve(__dirname, 'src'),
			},
		],
	},
	plugins: [
		react(),
		svgr(),
		legacy({
			/*
			targets: ['defaults', 'not IE 11'], 

			targets
			Type: string | string[] | { [key: string]: string }
			Default: 'last 2 versions and not dead, > 0.3%, Firefox ESR'
			*/
			targets: ['ie >= 9'],
			/*
			additionalLegacyPolyfills
			Type: string[]

			Add custom imports to the legacy polyfills chunk. 
			Since the usage-based polyfill detection only covers ES language features, 
			it may be necessary to manually specify additional DOM API polyfills using this option.
			*/
			additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
		}),
		createVitePlugin()
	],
	build: {
		// rollupOptions: {
		// 	input: inputs,
		// },
		/*
		build.sourcemap 构建后是否生成 source map 文件。
		类型： boolean | 'inline' | 'hidden'
		默认： false
		
		如果为 true，将会创建一个独立的 source map 文件。
		如果为 'inline'，source map 将作为一个 data URI 附加在输出文件中。
		'hidden' 的工作原理与 true 相似，只是 bundle 文件中相应的注释将不被保留。
		*/
		sourcemap: true,
		/*
		build.outDir 指定输出路径（相对于 项目根目录).
		*/
		outDir: path.resolve(__dirname, './dist'),
		/*
		build.emptyOutDir
		类型： boolean
		默认： 若 outDir 在 root 目录下，则为 true

		默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
		若 outDir 在根目录之外则会抛出一个警告避免意外删除掉重要的文件。
		可以设置该选项来关闭这个警告。该功能也可以通过命令行参数 --emptyOutDir 来使用。
		*/
		emptyOutDir: true,
	},
	server: {
		/*
		server.port  指定开发服务器端口。
		类型： number
		默认值： 5173

		注意：如果端口已经被使用，Vite 会自动尝试下一个可用的端口，所以这可能不是开发服务器最终监听的实际端口。
		*/
		port: 8080,
		/*
		server.proxy
		类型： Record<string, string | ProxyOptions>
		为开发服务器配置自定义代理规则。
		期望接收一个 { key: options } 对象。
		任何请求路径以 key 值开头的请求将被代理到对应的目标。
		如果 key 值以 ^ 开头，将被识别为 RegExp。
		configure 选项可用于访问 proxy 实例。

		示例：
		export default defineConfig({
			server: {
				proxy: {
				// 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
				'/foo': 'http://localhost:4567',
				// 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
				'/api': {
					target: 'http://jsonplaceholder.typicode.com',
					changeOrigin: true,
					rewrite: (path) => path.replace(/^\/api/, ''),
				},
				// 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
				'^/fallback/.*': {
					target: 'http://jsonplaceholder.typicode.com',
					changeOrigin: true,
					rewrite: (path) => path.replace(/^\/fallback/, ''),
				},
				// 使用 proxy 实例
				'/api': {
					target: 'http://jsonplaceholder.typicode.com',
					changeOrigin: true,
					configure: (proxy, options) => {
					// proxy 是 'http-proxy' 的实例
					}
				},
				// 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
				'/socket.io': {
					target: 'ws://localhost:5174',
					ws: true,
				},
				},
			},
		})
		*/
		proxy: {
			// '/api': {
			// 	target: 'http://10.67.17.250:3080/mock/17/',
			// 	changeOrigin: true,
			// 	rewrite: (path) => path.replace(/^\/api/, ''),
			// 	cookieDomainRewrite: 'localhost',
			// },
			'/service': {
				/*
				target

				使用场景：target 属性在 Vite 的 vite.config.ts 或 vite.config.js 文件的 server.proxy 配置中指定，
				用于设置代理服务器应该将请求转发到的目标地址。
				这通常是一个后端服务的API接口地址。
				*/
				target: targetHost,
				/*
				changeOrigin 用于在跨域代理请求时更改请求的 origin 头部，以便后端服务能够正确地处理请求。
				*/
				changeOrigin: true,
				cookieDomainRewrite: 'localhost',
			},
			'/sas': {
				target: targetHost,
				changeOrigin: true,
				cookieDomainRewrite: 'localhost',
				// rewrite: (path) => path.replace(/^\/api/, ''),
			},
			'/web': {
				target: targetHost,
				changeOrigin: true,
				cookieDomainRewrite: 'localhost',
				// rewrite: (path) => path.replace(/^\/api/, ''),
			},
			'/jmsapi': {
				target: targetHost,
				changeOrigin: true,
				/*
				 rewrite

				使用场景：rewrite 属性是一个函数，用于在将请求转发到目标地址之前修改请求的URL路径。
				这通常用于移除代理路径前缀，以便后端服务能够正确地处理请求。
				*/
				// rewrite: (path) => path.replace(/^\/smcapi/, ''),
				cookieDomainRewrite: 'localhost',
				// cookieDomainRewrite: '10.67.0.61',
			},
		},
	},
})
